<template>
  <div class="div-clas">
    <el-row type="flex" class="row-bg" justify="start">
      <el-col :span="1"
        ><div class="grid-content bg-purple">
          <div class="one-class">
            <!-- 模仿微信聊天网页 -->
            <!-- 第一部分 头像和通讯录 和设置 -->
            <div class="one-item-class item-class">
              <img @click="imgeClick" class="img-avater" :src="user.urAvatar" />
            </div>
            <div
              class="one-item-class item-class"
              @click="
                ToggleIcon('https://www.hualigs.cn/image/613323c7b1dd2.jpg')
              "
            >
              <img class="images-size" :src="chattroom" />
            </div>

            <div
              class="one-item-class item-class"
              @click="
                ToggleIconfriend(
                  'https://www.hualigs.cn/image/61331f06d17fb.jpg'
                )
              "
            >
              <img class="images-size" :src="friend" />
            </div>
          </div></div
      ></el-col>

      <el-col :span="1"
        ><div class="grid-content bg-purple">
          <!-- 第二部分 搜索框和一个加号 -->
          <friend
            v-if="friendliststats == 1"
            @updateFriend="updateFriend"
          ></friend>
          <friendlist
            ref="friedn"
            v-if="friendliststats == 2"
            @openAddUser="openAddUser"
            @chatUser="chatUser"
          ></friendlist>
        </div>
      </el-col>

      <el-col :span="1"
        ><div class="grid-content bg-purple">
          <chatroom ref="c1" @notifyFriends="notifyFriends"></chatroom></div
      ></el-col>
    </el-row>

    <!-- 头像弹窗 -->
    <el-dialog
      :visible.sync="imgeavater.dialogVisible"
      width="50%"
      :before-close="imgeavaterhandleClose"
    >
      <!-- 个人信息  -->
      <el-descriptions
        class="margin-top"
        title="用户信息"
        :column="3"
        :size="size"
        border
      >
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            昵称
          </template>
          <el-tag size="small">{{ user.urName }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            用户名
          </template>
          <el-tag> {{ user.urUsername }} </el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i
              :class="`${user.urSex == 0 ? 'el-icon-female' : 'el-icon-male'}`"
            ></i>
            性别
          </template>
          {{ user.urSex == 0 ? "男" : "女" }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-message el-icon-postcard"></i>
            邮箱
          </template>
          {{ user.urEmail }}
        </el-descriptions-item>
      </el-descriptions>

      <span slot="footer" class="dialog-footer">
        <el-button @click="imgeavater.dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import friend from "@/views/chatroom/friend.vue";
import friendlist from "@/views/chatroom/friend-list.vue";
import chatroom from "@/views/chatroom/chatroom.vue";
import { getUserId } from "@/utils/auth";
import api from "@/api/admin";
import admin from "@/api/admin";
export default {
  components: {
    friend,
    chatroom,
    friendlist,
  },
  data() {
    return {
      friendliststats: 1,
      socket: {},
      user: {},
      isEnis: false,
      imgeavater: {
        dialogVisible: false,
      },
      textarea: "",
      chattroom: "https://www.hualigs.cn/image/613323c7b1dd2.jpg",
      friend: "https://www.hualigs.cn/image/6133206b791f9.jpg",
    };
  },
  created() {
    this.getUser();
    this.openWebsocket();
    this.getFriends();
  },
  methods: {
    /* 点击用户进行通讯的聊天 */
    chatUser(chatuserId) {
      // console.log("点击的通讯用户的id:"+chatuserId)
      this.$refs.c1.chatuser(chatuserId, this.socket);
    },

    /* 获取好友列表 */
    getFriends() {
      if (this.friendliststats == 2) {
        this.$refs.friedn.getuserList();
      }
    },

    /* 通知好友添加成功 */
    notifyFriends(adduserId) {
      this.socket.send("addfriends_--_" + adduserId);
    },

    /* 打开用户列表 */
    openAddUser() {
      this.$refs.c1.updateshowAddUser();
    },

    /* 调用获取添加朋友的最新的方法 */
    updateFriend(adduserId) {
      this.socket.send("addUsers_--_" + adduserId);
    },

    /* websocket 连接 */
    openWebsocket() {
      var _this = this;
      //  console.log(window.WebSocket, "************");
      //判断浏览器支持websocket
      if (window.WebSocket) {
        //获取对象
        this.socket = new WebSocket(
          "ws://localhost:8087/msg?userId=" + getUserId()
        );
        //相当于channelReado ev 收到服务器端回送的信息
        this.socket.onmessage = function (ev) {
          console.log("收到服务端的信息");
          console.log(ev);
          //传过来获取到添加好消息
          if (ev.data == "addUser") {
            _this.$notify.info({
              title: "消息",
              message: "你收到一条好丫申请快去申请列表查看吧！",
            });
            return;
          }

          /* 收到了好友添加成功的通知信息  更新列表*/
          if (ev.data == "addfriends") {
            //  console.log("收到了好友通过的信息....");
            _this.getFriends();
            return;
          }

          /* 收到存储聊天记录信息 */
          if (ev.data.indexOf("savechatMsg:<<") != -1) {
            var msg = ev.data.split(":<<")[1];
            _this.$refs.c1.savechatRoom(msg);
            return;
          }

          /* 接收到信息 */
          _this.$refs.c1.newMsg(ev.data);
        };

        //连接成功
        this.socket.onopen = function (ev) {
          console.log("连接成功");
          _this.openSend();
        };

        //断开连接
        this.socket.onclose = function (ev) {
          console.log("连接关闭",ev);
        };
      } else {
        alert("抱歉你的浏览器不支持websocket!");
      }
    },

    openSend() {
      console.log(this.socket.readyState == WebSocket.OPEN);
      if (this.socket.readyState == WebSocket.OPEN) {
        //通过socket 发送消息
        // this.socket.send("测试");
      } else {
        alert("连接没有开启");
      }
    },

    /* 点击头像 */
    imgeClick() {
      this.imgeavater.dialogVisible = true;
    },

    /* 获取用户信息 */
    getUser() {
      api.info(getUserId()).then((res) => {
        this.user = res.data.user;
      });
    },

    ToggleIcon(v) {
      this.$refs.c1.closeShow()
      this.chattroom = v;
      this.friendliststats = 1;
      this.friend = "https://www.hualigs.cn/image/6133206b791f9.jpg";
    },
    ToggleIconfriend(v) {
      this.friendliststats = 2;
      this.friend = v;
      this.chattroom = "https://www.hualigs.cn/image/613320c31840a.jpg";
    },
  },
};
</script>

<style>

 .row-bg{


}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

/* 第一部分css */
.div-class {
}
.one-class {
  width: 70px;
  height: 500px;
  background-color: #303030;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
}
.one-item-class {
  width: 80%;
}
.item-class {
  margin-left: 20%;
}
.img-avater {
  margin-top: 50%;
  width: 50%;
  border-radius: 3px;
}
.images-size {
  margin-top: 50%;
  width: 35%;
}

/* 弹窗头像 */
.user-avater-class {
  width: 20%;
}

/* 第二部分css */
.two-class {
  position: relative;
  width: 240px;
  height: 500px;
  border-right: 1px solid white;
  background-color: #e6e6e6;
}

.input-class {
  position: relative;
  left: 5%;
  width: 70%;
  height: 1px;
}
.el-button-class {
  position: relative;
  left: 10%;
}
/* 第三部分 */
.threen-class {
  width: 800px;
  height: 500px;
  background-color: #e6e6e6;
}
.spane-class-title {
  position: relative;
  margin-top: 20px;
  font-weight: bold;
  font-size: 18px;
  font-family: 宋体;
}

.three-input-class {
  position:fixed;
  width: 76%;
  position:  absolute;
  height: 200px;
  background-color: rgb(255, 255, 255);
  position: relative;
  left: 186px;
 border-radius: 5px;
  margin-top: 35%;
}
.input-class-srf {
  width: 78%;
   border-radius: 5px;
  height: 100px;
  border: 1px solid white;
}

.input-class-srf:focus {
  outline: none;

  border: 1px solid white;
}
.button-class-fs {
  position: relative;
  margin-left: 89%;
  margin-top: 10%;
}
</style>